<template>
  <div class="content">
    <div class="top">
      <div>
        <van-nav-bar class="nav-bar-style" left-arrow @click-left="onClickLeft">
          <template #title>
            <div class="nav-bar-title-style">入库单</div>
          </template>
          <template #left>
            <van-icon size="30" name="arrow-left" color="#FFF" />
          </template>
        </van-nav-bar>
      </div>
      <!-- 搜索 -->
      <div class="searchCont">
        <form class="search-block">
          <van-search v-model="conditionSearch" placeholder="请输入搜索关键词" @keypress="tapToSearch" />
        </form>
      </div>
    </div>

    <van-pull-refresh class="pull-refresh-style" v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset="offset"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getInStorageList"
      >
        <van-cell>
          <ul>
            <li class="totoalItemStyle" v-for="(item,index) in soureInstorageList" :key="index">
              <div class="left">
                <div class="leftLi" :class="index > 0 ? 'actmartop':''">
                  <div class="title">单据号</div>
                  <div class="desc">{{item.orderCode}}</div>
                </div>
                <!-- <div class="leftLi">
                  <div class="title">单据来源</div>
                  <div class="desc">{{item.sourceDeptName}}</div>
                </div>
                <div class="leftLi">
                  <div class="title">申请人</div>
                  <div class="desc">{{item.applicant}}</div>
                </div> -->

                <div class="leftLi">
                  <div class="title">物料名称</div>
                  <div class="desc">{{item.materailName}}</div>
                </div>
                <div class="leftLi">
                  <div class="title">物料编码</div>
                  <div class="desc">{{item.materailCode}}</div>
                </div>
                <div class="leftLi">
                  <div class="title">入库数量</div>
                  <div class="desc">{{item.number}}</div>
                </div>
              </div>
              <div class="right-arrow-style" @click="skipToInstorageDetail(item.inStockId)">
                <img src="@/assets/ic_right_arrow.png" width="37%" height="37%" />
              </div>
            </li>
          </ul>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import http from "@/utils/request.js";
import api from "@/utils/api";
import { List } from "vant";
import { PullRefresh } from "vant";
import { Toast } from "vant";
import router from "@/router";
Vue.use(List);
Vue.use(PullRefresh);

export default {
  data() {
    return {
      retryCount: 0,
      page: 1, //请求第几页
      pageSize: 10, //每页请求的数量
      total: 0, //总共的数据条数
      offset: 0,
      loading: false,
      finished: false,
      refreshing: false,
      soureInstorageList: [],
      conditionSearch: ""
    };
  },
  watch: {
    conditionSearch(newData) {
      if (newData) {
      } else {
        //请求全部数据 重置所有数据 得到列表数据
        this.getInStorageList();
      }
    }
  },
  methods: {
    onSwipeLeft() {
      this.$router.go(-1);
    },
    onClickLeft() {
      router.push({ path: "/navagation" });
    },

    getInStorageList() {
      this.loading = true;
      let params = {
        keyword: this.conditionSearch
      };
      this.soureInstorageList = [];
      http
        .fetchGet(api.LimsGetInStockPdaList, params, "加载中...")
        .then(response => {
          response.data.forEach(item => {
            this.soureInstorageList.push(item);
            console.log(item.sourceDeptName);
          });
          this.loading = false;
          this.finished = true;
          this.refreshing = false;
        })
        .catch(err => {
          this.loading = false;
          this.finished = true;
          this.refreshing = false;
          this.retryCount++;
          if (this.retryCount < 3) {
            this.getInStorageList();
          }
        });
    },

    skipToInstorageDetail(inStockId) {
      this.$router.push({
        path: "/inStorageMaterialDetail",
        query: {
          inStockId: inStockId
        }
      });
    },
    tapToSearch(event) {
      if (event.keyCode === 13) {
        this.getInStorageList();
      }
    },
    onRefresh() {
      // if (this.refreshing == true) {
      //   return;
      // }
      this.getInStorageList();
      // this.refreshing = true;
      // this.finished = false;
      // this.loading = true;
    }
  }
};
</script>

<style scoped lang="scss">
// .contLi {
//   padding: 8px;
//   box-sizing: border-box;
//   display: flex;
//   font-size: 20px;
//   justify-content: space-between;
//   align-items: center;
//   background-color: #fff;
//   margin-top: 10px;
// }
.top {
  // position: fixed;
  // top: 0;
  // left: 0;
  // width: 100%;
  // z-index: 999;
}
.left {
  width: 75%;
  text-align: left;
}
.btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 50px;
}
.leftLi {
  display: flex;
  line-height: 40px;
  // word-break: keep-all;
  // white-space: nowrap;
  // overflow: hidden;
  text-overflow: ellipsis;
}
.title {
  min-width: 33%;
  color: #999999;
}
.desc {
  margin-left: 20px;
  color: #333333;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
.right-arrow-style {
  margin-left: 20px;
  display: flex;
  align-items: flex-end;
}
.van-button--primary {
  background-color: rgba(71, 124, 236, 1);
}
.nav-bar-title-style {
  font-size: 22px;
  text-align: center;
  font-family: PingFangSC-Regular;
  color: #fff;
  margin-right: 62px;
}

.totoalItemStyle {
  border-bottom: 1px solid #dcdcdc;
  display: flex;
  padding: 8px;
  flex-shrink: 1;
  font-size: 20px;
  align-items: flex-start;
  background-color: #fff;
  flex-grow: 1;
  width: 100%;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: center;
}
.actmartop {
  margin-top: 20px;
}
.nav-bar-title-right-style {
  font-size: 20px;
  margin-top: 5px;
  font-family: PingFangSC-Regular;
  text-align: center;
  margin-bottom: 11px;
  color: rgba(71, 124, 236, 1);
}
.nav-bar-style {
  background: #2e71ff;
  color: #fff;
}
.pull-refresh-style {
  height: 80%;
  width: 100%;
}
/* 修改 */
.searchCont {
  display: flex;
  align-items: center;
  height: 70px;
  background-color: #f6f6f6;
}
.van-search {
  width: 100%;
  background-color: #f6f6f6;
}
.search-block {
  width: 90%;
  margin: auto;
}
.van-search__content {
  background-color: #e8e8e8;
  border-radius: 20px;
}
/deep/ .van-icon {
  font-size: 25px;
}
</style>
